<template>
  <div class="app">
    <Category title="美食">
      <img :src="mieshiUrl" slot="a" />
      <a href="" slot="b">点击查看详情</a>
    </Category>
    <Category title="游戏">
      <template slot="a" scope="{gameArr}">
          <ul>
        <li v-for="game in gameArr" >{{ game }}</li>
      </ul>
      </template>
      
      <a href="" slot="b">点击跳转</a>
    </Category>
    <Category title="电影">
      <video :src="movieUrl" slot="a"></video>
      <a href="" slot="b">点击查看视频</a>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      mieshiUrl: "https://s3.ax1x.com/2021/01/16/srJlq0.jpg",
      
      movieUrl: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
    };
  },
};
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-around;
  background-color: rgb(137, 72, 197);
  padding: 20px;
}
img,
video {
  width: 100%;
}
</style>